<template>
	<navigatorComp title="文章管理" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni
		:height="height + 'px'"
		:up="upOption"
		@init="mescrollInit"
		@down="myDownCallback"
		@up="upCallback"
	>
		<view class="article_list">
			<view class="messageBox" v-for="(item, index) in messageList" :key="index">
				<view class="intro">
					{{ item.content }}
					<u-icon
						name="trash"
						size="24"
						color="#0E0E0E"
						style="margin-right: -10rpx;margin-left: 20rpx;"
						@click="
							currentId = item.dynamicId;
							showDelModel = true;
						"
					></u-icon>
				</view>
				<view class="imageList" v-if="isArray(item.images)">
					<image
						:src="ele"
						alt=""
						v-for="(ele, i) in item.images"
						:key="i"
						:style="{ marginBottom: item.images.length >= 4 ? '16rpx' : '' }"
						@click="previewImg(item.images, i)"
					></image>
				</view>
				<view class="footer">
					<view class="article_time">{{ formatTimestamp(item.timestamp) }}</view>
					<view class="display_flex">
						<up-icon
							name="chat"
							size="48rpx"
							@click="
								goUrl('/subPages/home/dynamic_detail?item=' + JSON.stringify(item))
							"
						></up-icon>
						<!-- <image src="http://112.124.50.179:8888/imgs/home/info.png" alt=""></image> -->
						<view style="margin-right: 32rpx">{{ item.commentNumber }}</view>
						<!-- <image  src="http://112.124.50.179:8888/imgs/home/like.png" alt=""></image> -->
						<!-- (0:未点赞，1:已点赞，2:点赞过，又取消点赞) -->
						<up-icon
							name="thumb-up"
							size="48rpx"
							v-if="item.whetherLike == 0 || item.whetherLike == 2"
							@click="setLike(item, index)"
						></up-icon>
						<up-icon
							name="thumb-up-fill"
							color="#FF4C5A"
							size="48rpx"
							v-else
							@click="setLike(item, index)"
						></up-icon>
						<view>{{ item.likeNumber }}</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-uni>

	<!-- 删除确认框 -->
	<myModel v-model:show="showDelModel" title="是否确认删除？" content="" @confirm="del"></myModel>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myModel from '/components/model/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { isArray } from '@/external/luch-request/utils';
import { formatTimestamp } from '@/utils/time.js';
import { previewImg } from '@/utils/previewImg.js';
import _ from 'lodash';
import store from '@/store/index.js';

import HomeApi from '@/API/home/index.js';
import MineApi from '@/API/mine/index.js';
const mineApi = new MineApi();
const homeApi = new HomeApi();

const height = ref(0); //列表高度
const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const latestId = ref(0); //最后一个元素的id
const messageList = ref([]); //信息列表
const currentId = ref('');
const showDelModel = ref(false);

onMounted(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight;
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().screenHeight -
		getApp().globalData.bottom -
		getApp().globalData.navHeight -
		uni.upx2px(88);
	// #endif
});

/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
const myDownCallback = (mescroll) => {
	latestId.value = 0;
	downCallback();
};

/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
const upCallback = (mescroll) => {
	mineApi
		.getPersonalDynamic({
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.dynamicSimpleList || []; // 当前页数据
			if (latestId.value == 0) messageList.value = [];
			messageList.value = messageList.value.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].dynamicId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
			messageList.value.forEach((item) => {
				item.publisherHeadUrl = store.state.userInfo.userInfo.headUrl;
				item.publisherNickname = store.state.userInfo.userInfo.nickname;
				item.images = JSON.parse(item.picture);
				item.publisherSubstance = item.content;
				// 判断是不是自己发布的
				item.is_show = uni.getStorageSync('userInfo').userId == item.publisherUserId;
			});
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

/**
 * 删除文章
 */
const del = (dynamicId) => {
	homeApi
		.deleteDynamicApi({
			dynamicId: currentId.value
		})
		.then((res) => {
			if (res.code === 0) {
				showDelModel.value = false;
				myDownCallback();
			}
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

/**
 * 点赞
 * @param {Object} item
 */
const setLike = _.throttle(function (item) {
	if (item.whetherLike == 1) {
		item.whetherLike = 0;
		homeApi
			.deleteLikeApi({
				dynamicId: item.dynamicId,
				likeType: '1',
				commentId: 0,
				commentCommentId: 0
			})
			.then((res) => {
				item.likeNumber--;
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			})
			.catch(() => {});
	} else {
		item.whetherLike = 1;
		homeApi
			.likeApi({
				dynamicId: item.dynamicId,
				likeType: '1',
				commentId: 0,
				commentCommentId: 0
			})
			.then((res) => {
				item.likeNumber++;
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			})
			.catch(() => {});
	}
}, 1000);

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.article_list {
	padding: 24rpx 32rpx 0;

	.messageBox {
		margin-bottom: 24rpx;
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}

		.userInfo {
			display: flex;
			align-items: center;

			.avater {
				width: 72rpx;
				height: 72rpx;
				border-radius: 0;
				margin-right: 16rpx;
				border-radius: 50%;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #0e0e0e;
				line-height: 33rpx;
				font-style: normal;
				text-transform: none;
			}

			.date {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				line-height: 23rpx;
				font-style: normal;
				text-transform: none;
			}
		}

		.intro {
			width: 100%;
			font-weight: 400;
			font-size: 28rpx;
			color: #0e0e0e;
			line-height: 40rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.imageList {
			margin-top: 16rpx;
			display: flex;
			flex-wrap: wrap;
			margin-right: -10rpx;
			image {
				width: calc(33.33333% - 10rpx);
				margin-right: 10rpx;
				height: 196rpx;
				border-radius: 16rpx;
			}
		}
		.footer {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
			font-style: normal;
			text-transform: none;

			.article_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 24rpx;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.u-icon {
				margin-right: 8rpx;
			}
		}
	}
}
</style>
